import "./Operation_overview.scss";
import "./font_8s8i9sht1ru/iconfont.css";
import { DisconnectOutlined } from "@ant-design/icons";
import { Table, Tag, Space, Button } from "antd";
import Highcharts from "highcharts";
import HighchartsReact from "highcharts-react-official";
import { useState } from "react";
import AddOne from "./newPage/AddOne";

const columns = [
    {
        title: "企业名称",
        dataIndex: "name",
        key: "name",
    },
    {
        title: "高新人才数",
        dataIndex: "num",
        key: "num",
    },
    {
        title: "企业估值（亿元）",
        dataIndex: "money",
        key: "money",
    },
];

const data = [
    {
        key: 1,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 2,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 3,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 4,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 5,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 6,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 7,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 8,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 9,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
    {
        key: 10,
        name: "杭州久碳科技有限公司",
        num: 32,
        money: 32,
    },
];

const options1 = {
    chart: {
        type: "column",
        height: 250,
        width: 581,
    },
    title: {
        text: "",
    },
    xAxis: {
        categories: [
            "能源",
            "工业",
            "农业",
            "医疗",
            "制造业",
            "交通",
            "信息化服务业",
        ],
    },
    yAxis: {
        title: {
            text: "单位（家）",
        },
        min: 0,
        tickInterval: 200,
        max: 1000,
    },
    legend: {
        enabled: false,
    },
    credits: {
        enabled: false,
    },
    tooltip: {
        enabled: false,
    },
    plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
            },
        },
    },
    colors: ["#316CFB"],
    series: [
        {
            data: [
                {
                    name: "能源",
                    y: 200,
                },
                {
                    name: "工业",
                    y: 400,
                },
                {
                    name: "农业",
                    y: 600,
                },
                {
                    name: "医疗",
                    y: 800,
                },
                {
                    name: "制造业",
                    y: 900,
                },
                {
                    name: "交通",
                    y: 600,
                },
                {
                    name: "信息化服务业",
                    y: 600,
                },
            ],
        },
    ],
};

const options2 = {
    chart: {
        type: "pie",
        height: 400,
        width: 581,
    },
    title: {
        text: "",
    },
    colors: ["#3BA1FF", "#37CBCB", "#4FCB74", "#FBD438", "#F2647C"],
    tooltip: {
        enabled: false,
    },
    plotOptions: {
        enabled: true,
        pie: {
            dataLabels: {
                enabled: true,
                format: "<b>{point.name}</b>: {point.percentage:.1f} %",
            },
        },
    },
    series: [
        {
            type: "pie",
            innerSize: "60%",
            data: [
                ["煤", 40],
                ["气", 21],
                ["油品", 17],
                ["电", 13],
                ["热", 9],
            ],
        },
    ],
};

const Charts1 = () => (
    <div>
        <HighchartsReact highcharts={Highcharts} options={options1} />
    </div>
);

const Charts2 = () => (
    <div>
        <HighchartsReact highcharts={Highcharts} options={options2} />
    </div>
);

// 页面跳转

const OperationOverview = () => {
    const [isaddpage1, setaddpage1] = useState(false);
    const [isEnergy, setEnergy] = useState(true);
    const xinzeng1 = () => {
        setaddpage1(true);
    };
    if (isaddpage1) {
        // 新增页面
        return (
            <div className="roleContent">
                <AddOne setaddpage1={setaddpage1}></AddOne>
            </div>
        );
    }
    return (
        <div className="operation_overview">
            <div className="part">
                <div className="sketch">
                    <ul>
                        <li>
                            <div className="icon">
                                <span className="iconfont icon-lianjie"></span>
                            </div>
                            <div className="writing">
                                <p>文章总数（篇）</p>
                                <p style={{ color: "rgb(74,74,250)" }}>915</p>
                            </div>
                        </li>
                        <li>
                            <div className="icon">
                                <span className="iconfont icon-qianzaikehu"></span>
                            </div>
                            <div className="writing">
                                <p>潜在客户（个）</p>
                                <p style={{ color: "rgb(132,0,255)" }}>536</p>
                            </div>
                        </li>
                        <li>
                            <div className="icon">
                                <span className="iconfont icon-renqun"></span>
                            </div>
                            <div className="writing">
                                <p>企业情况（家）</p>
                                <p style={{ color: "rgb(244,171,75)" }}>694</p>
                            </div>
                        </li>
                        <li>
                            <div className="icon">
                                <span className="iconfont icon-geren2"></span>
                            </div>
                            <div className="writing">
                                <p>园区用户（人）</p>
                                <p style={{ color: "rgb(84,194,237)" }}>8536</p>
                            </div>
                        </li>
                    </ul>
                    <div className="content">
                        <div className="wait">
                            <div className="tittit">
                                <div></div>
                                <h4>待办事项</h4>
                            </div>
                            <ul className="list">
                                <li>
                                    <p>入驻待审核企业</p>
                                    <p>23（家）</p>
                                    <p>我来处理</p>
                                </li>
                                <li>
                                    <p>合同签订待处理</p>
                                    <p>42（单）</p>
                                    <p>我来处理</p>
                                </li>
                                <li>
                                    <p>租户物业费催缴</p>
                                    <p>22（单）</p>
                                    <p
                                        onClick={xinzeng1}
                                        style={{ cursor: "pointer" }}
                                    >
                                        我来处理
                                    </p>
                                </li>
                                <li>
                                    <p>潜在客户待签单</p>
                                    <p>37（单）</p>
                                    <p>我来处理</p>
                                </li>
                            </ul>
                        </div>
                        <div className="news">
                            <div className="tittit">
                                <div></div>
                                <h4>最新动态</h4>
                                <p>more</p>
                            </div>
                            <ul className="newlist">
                                <li>
                                    <div>置顶</div>
                                    <p>我（超级管理员）通过了的入驻申请</p>
                                </li>
                                <li>
                                    <div>置顶</div>
                                    <p>我（超级管理员）通过了的入驻申请</p>
                                </li>
                                <li>
                                    <div>置顶</div>
                                    <p>我（超级管理员）通过了的入驻申请</p>
                                </li>
                                <li>
                                    <div>置顶</div>
                                    <p>我（超级管理员）通过了的入驻申请</p>
                                </li>
                                <li>
                                    <div>置顶</div>
                                    <p>我（超级管理员）通过了的入驻申请</p>
                                </li>
                                <li>
                                    <div>置顶</div>
                                    <p>我（超级管理员）通过了的入驻申请</p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div className="rank">
                    <h4>园区优质企业排名TOP10</h4>
                    <Table
                        columns={columns}
                        dataSource={data}
                        pagination={false}
                    />
                </div>
            </div>
            <div className="part">
                <div className="park">
                    <div className="tittit">
                        <div></div>
                        <h4>园区企业资质情况</h4>
                    </div>
                    <ul>
                        <li>
                            <p>上市公司</p>
                            <p style={{ color: "rgb(0,128,128)" }}>88</p>
                        </li>
                        <li>
                            <p>高新企业</p>
                            <p style={{ color: "rgb(245,154,35)" }}>361</p>
                        </li>
                        <li>
                            <p>规上企业</p>
                            <p style={{ color: "rgb(2,167,240)" }}>682</p>
                        </li>
                        <li>
                            <p>专精特新企业</p>
                            <p style={{ color: "rgb(2,167,240)" }}>692</p>
                        </li>
                    </ul>
                    <div>
                        <Charts1 />
                    </div>
                </div>
                <div className="park park2">
                    <div className="tittit">
                        <div></div>
                        <h4>园区双碳用能情况</h4>
                        <p
                            className={isEnergy ? "energy" : "blowoff"}
                            onClick={() => {
                                setEnergy(true);
                            }}
                        >
                            能耗情况
                        </p>
                        <p
                            className={!isEnergy ? "energy" : "blowoff"}
                            onClick={() => {
                                setEnergy(false);
                            }}
                        >
                            碳排情况
                        </p>
                    </div>
                    <div className="pie">
                        <Charts2 />
                        <div className="titleChart">
                            <span style={{ fontSize: "14px" }}>能耗总量</span>
                            <br />
                            <span style={{ fontSize: "30px" }}>3245</span>
                            <br />
                            <span style={{ fontSize: "12px" }}>吨标煤</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default OperationOverview;
